<template>
	<view style="height: 100vh;" :style="{'background-color' : backgroundColor}">
		<view id="main">
			<u-avatar :size="128" icon="user" />
			<uni-card id="login-pane">
				<uni-form id="login-form" ref="loginForm">
					<uni-form-item>
						<uni-easyinput type="text" v-model="userInfo.account" placeholder="账号" />
					</uni-form-item>
					<uni-form-item>
						<uni-easyinput type="password" v-model="userInfo.password" placeholder="密码" />
					</uni-form-item>
					<view :style="{'background-color' : backgroundColor}" class="login-button">
						<u-button :style="{'background-color': navButtonColor}" @click="login">登录</u-button>
					</view>
					<view style="margin: 10rpx 10rpx 0rpx; display: flex; justify-content: space-between; width: 100vw">
						<navigator url="/pages/user/logon">注册</navigator>
					</view>
				</uni-form>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		loginHttp
	} from '@/api/user/index.js'

	export default {
		data() {
			return {
				userInfo: {
					account: '',
					password: ''
				},
				backgroundColor: '',
				navButtonColor: ''
			}
		},
		onReady() {
			this.backgroundColor = uni.getStorageSync('backgroundColor')
			this.navButtonColor = uni.getStorageSync('navButtonColor')
		},
		methods: {
			login() {
				if (this.userInfo.account == '' || this.userInfo.password == '') {
					uni.showToast({
						title: '请输入账号密码',
						duration: 2000,
						icon: 'error'
					});
					return
				}

				loginHttp({
					username: this.userInfo.account,
					password: this.userInfo.password
				}).then(res => {
					uni.setStorageSync('backgroundColor', res.data.color)
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('name', this.userInfo.account)

					uni.navigateTo({
						url: '/pages/index/index'
					})
				})
			},
			toLogon() {
				uni.navigateTo({
					url: ""
				})
			},
			toForgotPassword() {
				uni.navigateTo({
					url: "forgotpassword"
				})
			}
		},
	}
</script>

<style>
	page {
		background-color: #2E62CD;
	}

	navigator {
		color: #fff;
	}

	#main {
		padding: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#login-pane {
		border: none;
		margin-top: 200rpx;
		width: 500rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: rgba(224, 243, 248, 0.1);
		border-radius: 5rpx;
	}

	#login-form {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 400rpx;
	}

	.login-button {
		width: 200rpx;
		margin: 0rpx auto;
	}
</style>
